<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	
	<!-- Set the viewport width to device width for mobile -->
	<meta name="viewport" content="width=device-width" />
	
	<title>jQuery Event Calendar Demo Page</title>
	<link rel="shortcut icon" href="images/favicon.ico" />
	
	<!-- Included CSS Files -->
	<link rel="stylesheet" href="css/eventCalendar.css">
	<link rel="stylesheet" href="css/eventCalendar_theme.css">

	<!--<script src="js/jquery.js" type="text/javascript"></script>-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
	
</head>
<body>
	<div id="paradigmaBox" class="poweredBy">
		<img src="img/paradigmaLogo.png" />
		<div class="data">
			<a href="http://www.paradigmatecnologico.com" target="_blank" class="name">Paradigma Tecnológico</a>
			<a href="http://twitter.com/#!/paradigmate" target="_blank" class="twitter">@paradigmate</a>
		</div>
	</div>
	<div id="vissitBox" class="poweredBy">
		<img src="img/jaime.png" />
		<div class="data">
			<a href="http://www.vissit.com" target="_blank" class="name">Jaime Fernández</a>
			<a href="http://twitter.com/#!/vissit" target="_blank" class="twitter">@vissit</a>
		</div>
	</div>
	<div class="cb"></div>
	<hr />
	<img src="img/eventsCalendarIcon_250.png" id="appLogo" class="fl"/>
	<h1>
		jQuery Event Calendar Demo Page
	</h1>
	<p>
		jQuery plugin to show events in a calendar in a very confortable way
	</p>
	<p>
		Main features:
	</p>
	<ul class="features">
		<li><strong>Fluid Calendar</strong>: calendar will be shown with the width of its parent. Size is recalculated on window resize. <a href="responsive.html">See responsive demo page</a></li>
		<li><strong>Change Style as you like</strong>: You can edit the .css file to restyle</li>
		<li><strong>Light</strong>: Less than 8kb of Javascript(minified)</li>
		<li><strong>jQuery rules!</strong>: It uses all the power of jQuery, but you can also use it with frameworks like Zepto.js</li>
		<li><strong>Highly customizable</strong>: You can change almost everything. Look at the following examples</li>
	</ul>
	
	<ul id="DemoList" class="cb">
		<li class="fl">
			<h2>Default Demo</h2>
			<p class="demoDesc">Example of jQuery Events Calendar with default parameters</p>
			<div id="eventCalendarDefault"></div>
			<pre>$(id).eventCalendar({
  // link to events json
  eventsjson: 'file.json' 
});</pre>
			
			<script>  
				$(document).ready(function() {  
					$("#eventCalendarDefault").eventCalendar({
						eventsjson: 'json/events.json.php' // link to events json
					});  
				});  
			</script> 
		</li>
		<li class="fl">
			<h2>No cache</h2>
			<p class="demoDesc">The plugin only calls once to the json file, so it has to contain all events. After that call, the plugin will filter the results</p>
			<div id="eventCalendarNoCache"></div>
			<script>  
				$(document).ready(function() {  
					$("#eventCalendarNoCache").eventCalendar({
						eventsjson: 'json/events.json.php',
						cacheJson: false
					});  
				});  
			</script>
<pre>$(id).eventCalendar({
  eventsjson: 'file.json',
  cacheJson: false
}); </pre>			
		</li>
		<li class="fl">
			<h2>inline json</h2>
			<p class="demoDesc">The json is written directly inside the plugin function via javaScript (no ajax call to get the events).</p>
			<div id="eventCalendarInline"></div>
			<script>  
				$(document).ready(function() {  
					var eventsInline = [{ "date": "1337594400000", "type": "meeting", "title": "Project A meeting", "description": "Lorem Ipsum dolor set", "url": "http://www.event1.com/" },{ "date": "1337677200000", "type": "demo", "title": "Project B demo", "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", "url": "http://www.event2.com/" }];
				
					$("#eventCalendarInline").eventCalendar({
						jsonData: eventsInline
					});  
				});  
			</script>
<pre>var eventsInline = [{ json }];
$(id).eventCalendar({
  jsonData: eventsInline
}); </pre>				
		</li>
		<li class="fl cb">
			<h2>Localization</h2>
			<p class="demoDesc">We have total control about the language of the plugin</p>
			<div id="eventCalendarLocale"></div>
			<script>  
				$(document).ready(function() {  
					$("#eventCalendarLocale").eventCalendar({
						eventsjson: 'json/events.json.php',
						monthNames: [ "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio",
							"Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre" ],
						dayNames: [ 'Domingo','Lunes','Martes','Miércoles',
							'Jueves','Viernes','Sabado' ],
						dayNamesShort: [ 'Dom','Lun','Mar','Mie', 'Jue','Vie','Sab' ],		
						txt_noEvents: "No hay eventos para este periodo",
						txt_SpecificEvents_prev: "",
						txt_SpecificEvents_after: "eventos:",
						txt_next: "siguiente",
						txt_prev: "anterior",
						txt_NextEvents: "Próximos eventos:",
						txt_GoToEventUrl: "Ir al evento"
					});  
				});  
			</script> 
<pre>$(id).eventCalendar({
  eventsjson: 'file.json',
  monthNames: [ "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio",
    "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre" ],
  dayNames: [ 'Domingo','Lunes','Martes','Miércoles',
    'Jueves','Viernes','Sabado' ],
  dayNamesShort: [ 'Dom','Lun','Mar','Mie', 'Jue','Vie','Sab' ],		
  txt_noEvents: "No hay eventos para este periodo",
  txt_SpecificEvents_prev: "",
  txt_SpecificEvents_after: "eventos:",
  txt_next: "siguiente",
  txt_prev: "anterior",
  txt_NextEvents: "Próximos eventos:",
  txt_GoToEventUrl: "Ir al evento"
}); </pre>	
		</li>
		<li class="fl">
			<h2>Limit Results</h2>
			<p class="demoDesc">It is possible to limit the number of events to show. But if we click on a day, results will not be filtered</p>
			<div id="eventCalendarLimit"></div>
			<script>  
				$(document).ready(function() {  
					$("#eventCalendarLimit").eventCalendar({
						eventsjson: 'json/events.json.php',
						eventsLimit: 2
					});  
				});  
			</script> 
<pre>$(id).eventCalendar({
  eventsjson: 'file.json',
  eventsLimit: 2
}); </pre>				
		</li>
		<li class="fl">
			<h2>Start week on Sunday</h2>
			<p class="demoDesc">Also you can customize the day when the week starts</p>
			<div id="eventCalendarCalendarSunday"></div>
			<script>  
				$(document).ready(function() {  
					$("#eventCalendarCalendarSunday").eventCalendar({
						eventsjson: 'json/events.json.php',
						startWeekOnMonday: false
					});  
				});  
			</script> 
<pre>$(id).eventCalendar({
  eventsjson: 'file.json',
  startWeekOnMonday: false
});</pre>				
		</li>
		<li class="fl cb wide">
			<h2>Calendar display</h2>
			<p class="demoDesc">You can show all the days in a single line to make calendar widget smaller</p>
			<div id="eventCalendarCalendarLine"></div>
			<script>  
				$(document).ready(function() {  
					$("#eventCalendarCalendarLine").eventCalendar({
						eventsjson: 'json/events.json.php',
						showDayAsWeeks: false
					});  
				});  
			</script> 
<pre>$(id).eventCalendar({
  eventsjson: 'file.json',
  showDayAsWeeks: false
});</pre>					
		</li>
		
		<li class="fl thin">
			<h2>Hide week days</h2>
			<p class="demoDesc">Hide the day names in the calendar view</p>
			<div id="eventCalendarWeekDays"></div>
			<script>  
				$(document).ready(function() {  
					$("#eventCalendarWeekDays").eventCalendar({
						eventsjson: 'json/events.json.php',
						showDayNameInCalendar: false
					});  
				});  
			</script>
			<pre>$(id).eventCalendar({
  eventsjson: 'file.json',
  showDayNameInCalendar: false
});</pre>		
		</li>
		<li class="fl cb">
			<h2>Show Events description</h2>
			<p class="demoDesc">Events description is hide by default (you can show it clicking on the event title), but if you want they can be always visible.</p>
			<div id="eventCalendarShowDescription"></div>
			<script>  
				$(document).ready(function() {  
					$("#eventCalendarShowDescription").eventCalendar({
						eventsjson: 'json/events.json.php',
						showDescription: true
					});  
				});  
			</script> 
			<pre>$(id).eventCalendar({
  eventsjson: 'file.json',
  showDescription: true
});</pre>	
		</li>
		<li class="fl">
			<h2>Show all descriptions</h2>
			<p class="demoDesc">By default, the plugin only shows the event that you select, but you can open all the descriptions in which you click on</p>
			<div id="eventCalendarOnlyOneDescription"></div>
			<script>  
				$(document).ready(function() {  
					$("#eventCalendarOnlyOneDescription").eventCalendar({
						eventsjson: 'json/events.json.php',
						onlyOneDescription: false
					});  
				});  
			</script>
<pre>$(id).eventCalendar({
  eventsjson: 'file.json',
  onlyOneDescription: false
});</pre>				
		</li>
		<li class="fl">
			<h2>Animation Speed</h2>
			<p class="demoDesc">Also you can customize the speed and the opacity of the widget animation</p>
			<div id="eventCalendarAnimation"></div>
			<script>  
				$(document).ready(function() {  
					$("#eventCalendarAnimation").eventCalendar({
						eventsjson: 'json/events.json.php',
						moveSpeed: 2000,
						moveOpacity: 1
					});  
				});  
			</script> 
			<pre>$(id).eventCalendar({
  eventsjson: 'file.json',
  moveSpeed: 2000,
  moveOpacity: 1
});</pre>	
		</li>
		<li class="fl cb">
			<h2>Events Scrollable</h2>
			<p class="demoDesc">It is possible to add a Scroll panel for the events list to avoid panel resize on date changes</p>
			<div id="eventCalendarScroll"></div>
			<script>  
				$(document).ready(function() {  
					$("#eventCalendarScroll").eventCalendar({
						eventsjson: 'json/events.json.php',
						eventsScrollable: true
					});  
				});  
			</script>
<pre>$(id).eventCalendar({
  eventsjson: 'file.json',
  eventsScrollable: true
});</pre>				
		</li>
		<li class="fl ">
			<h2>Open links in new window</h2>
			<p class="demoDesc">You can open event links in a new window</p>
			<div id="eventCalendarNewWindow"></div>
			<script>  
				$(document).ready(function() {  
					$("#eventCalendarNewWindow").eventCalendar({
						eventsjson: 'json/events.json.php',
						openEventInNewWindow: true,
						showDescription: true // also it can be false
					});  
				});  
			</script>
<pre>$(id).eventCalendar({
  eventsjson: 'file.json',
  openEventInNewWindow: true,
  showDescription: true // also it can be false
});</pre>				
		</li>
		
		
		
	</ul>
	<div class="cb"></div>
	<hr />
	<div class="fl">
		<p>
			Special thanks to:
		</p>
		<ul>
			<li>
				<strong>Nerea Navarro</strong> <a href="http://twitter.com/#!/nereaestonta">@nereaestonta</a> - Translation & Testing
			</li>
			<li>
				<strong>Juan Francisco del Río</strong> <a href="http://twitter.com/#!/juanriopacheco">@juanriopacheco</a> - Javascript Knowledge
			</li>
			<li>
				<strong>Nuria Martin</strong> <a href="http://twitter.com/#!/nmartins">@nmartins</a> - Design
			</li>
			<li>
				<strong>Luis Calvo</strong> <a href="http://twitter.com/#!/LuisCalvoDiaz">@LuisCalvoDiaz</a> - Testing
			</li>
			<li>
				<strong>David Montalvo</strong> <a href="http://twitter.com/#!/davidmontalvo">@davidmontalvo</a> - Testing
			</li>
		</ul>
	</div>
	<div id="license">
		<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"><img alt="Licencia de Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/3.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Dataset" property="dct:title" rel="dct:type">jQuery Event Calendar Plugin</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://www.vissit.com/jquery-event-calendar-plugin" property="cc:attributionName" rel="cc:attributionURL">Jaime Fernandez, Paradigma Tecnológico</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Reconocimiento-CompartirIgual 3.0 Unported License</a>.
	</div>
	<div class="cb"></div>
</body>	

<!--script src="js/jquery.timeago.js" type="text/javascript"></script-->
<!--<script src="js/jquery.eventCalendar.min.js" type="text/javascript"></script>-->
<script src="js/jquery.eventCalendar.js" type="text/javascript"></script>

<script type="text/javascript">//<![CDATA[
	// Google Analytics for WordPress by Yoast v4.2.3 | http://yoast.com/wordpress/google-analytics/
	var _gaq = _gaq || [];
	_gaq.push(['_setAccount','UA-12371131-1']);
	_gaq.push(['_trackPageview']);
	(function() {
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	})();
//]]></script>


</html>